<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>HTML5 Canvas雨滴下落动画DEMO演示4</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<style media="screen">
           body {
                color:#C0C0C0;
                height: 100%;
                margin: 0;
                padding: 0;
                font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
                color: #333;
            }

            img {
                width: 100%;
                height: 3000px;
            }

            #infobox {
                z-index: 100;
                position: absolute;
                top: 0;
                right: 0;
            }
            #infobox div {
                width: 260px;
                padding: 15px;
                background-color: #f2f2f2;
                visibility: hidden;
            }
            #infobox:hover div {
                visibility: visible;
            }
        </style>
        <script src="js/rainyday.min.js"></script>
        <script>
            function run() {
                var image = document.getElementById('background');
                image.onload = function() {
                    var engine = new RainyDay({
                        image: this,
                        gravityAngle: Math.PI / 9
                    });
                    engine.trail = engine.TRAIL_SMUDGE;
                    engine.rain([ [1, 0, 1000], [3, 3, 1] ], 100);
                };
                image.crossOrigin = 'anonymous';
                image.src = 'css/4.jpg';

                // hide info container
                document.getElementById('infobox').children[0].style.visibility = 'visible';
                setTimeout(function(){
                    // remove inline style -otherwise the hover effect would not be effective
                    document.getElementById('infobox').children[0].style.visibility = '';
                }, 5000);
           }
        </script>
	<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
</head>
<body onload="run();">
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<p>兼容性    地址<br>esma 兼容列表    <a href="http://kangax.github.io/compat-table/es6">http://kangax.github.io/compat-table/es6</a><br>W3C CSS验证服务    <a href="http://jigsaw.w3.org/css-validator/validator.html.zh-cn">http://jigsaw.w3.org/css-validator/validator.html.zh-cn</a><br>caniuse    <a href="http://caniuse.com/#index">http://caniuse.com/#index</a><br>csscreator    <a href="http://csscreator.com/properties">http://csscreator.com/properties</a><br>microsoft    <a href="https://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85.aspx">https://msdn.microsoft.com/zh-cn/library/cc351024(v=vs.85.aspx</a><br>在线测兼容-移动端    <a href="http://www.responsinator.com">http://www.responsinator.com</a><br>emulators    <a href="https://www.manymo.com/emulators">https://www.manymo.com/emulators</a><br>UI相关</p>
<p>UI相关    地址<br>bootcss    <a href="http://v3.bootcss.com">http://v3.bootcss.com</a><br>MetroUICSS    <a href="http://www.w3cplus.com/MetroUICSS">http://www.w3cplus.com/MetroUICSS</a><br>semantic    <a href="http://semantic-ui.com">http://semantic-ui.com</a><br>Buttons    <a href="http://alexwolfe.github.io/Buttons">http://alexwolfe.github.io/Buttons</a><br>kitecss    <a href="http://hiloki.github.io/kitecss">http://hiloki.github.io/kitecss</a><br>pintuer    <a href="http://www.pintuer.com">http://www.pintuer.com</a><br>amazeui    <a href="http://amazeui.org">http://amazeui.org</a><br>worldhello    <a href="http://www.worldhello.net/gotgithub/index.html">http://www.worldhello.net/gotgithub/index.html</a><br>linuxtoy    <a href="http://igit.linuxtoy.org/contents.html">http://igit.linuxtoy.org/contents.html</a><br>gitmagic    <a href="http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn">http://www-cs-students.stanford.edu/~blynn/gitmagic/intl/zh_cn</a><br>rogerdudler    <a href="http://rogerdudler.github.io/git-guide/index.zh.html">http://rogerdudler.github.io/git-guide/index.zh.html</a><br>gitref    <a href="http://gitref.justjavac.com">http://gitref.justjavac.com</a><br>book    <a href="http://git-scm.com/book/zh">http://git-scm.com/book/zh</a><br>gogojimmy    <a href="http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic">http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic</a><br>其它API</p>
<p>其它API    地址<br>HTTP API 设计指南    <a href="http://segmentfault.com/bookmark/1230000002521721">http://segmentfault.com/bookmark/1230000002521721</a><br>javascript流行库汇总    javascriptoo<br>验证api    <a href="http://niceue.com/validator/demo/index.php">http://niceue.com/validator/demo/index.php</a><br>underscore 中文手册    <a href="http://www.css88.com/doc/underscore">http://www.css88.com/doc/underscore</a><br>underscore源码分析    <a href="http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031">http://www.html-js.com/article/Underscorejs-source-code-analysis-of-underscorejs-source-code-analysis%203031</a><br>underscore源码分析-亚里士朱德的博客    <a href="http://yalishizhude.github.io/tags/underscore">http://yalishizhude.github.io/tags/underscore</a><br>underscrejs en api    <a href="http://underscorejs.org">http://underscorejs.org</a><br>lodash - underscore的代替品    <a href="https://lodash.com">https://lodash.com</a><br>ext4api    <a href="http://extjs-doc-cn.github.io/ext4api">http://extjs-doc-cn.github.io/ext4api</a><br>backbone 中文手册    <a href="http://www.csser.com/tools/backbone/backbone.js.html">http://www.csser.com/tools/backbone/backbone.js.html</a><br>qwrap手册    <a href="http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm">http://dev.qwrap.com/resource/js/_docs/_youa/#/qw/base/loadJs_.htm</a><br>缓动函数    <a href="http://easings.net/zh-cn">http://easings.net/zh-cn</a><br>svg 中文参考    <a href="http://www.w3school.com.cn/svg/svg_reference.asp">http://www.w3school.com.cn/svg/svg_reference.asp</a><br>svg mdn参考    <a href="https://developer.mozilla.org/en-US/docs/Web/SVG">https://developer.mozilla.org/en-US/docs/Web/SVG</a><br>svg 导出 canvas    <a href="https://github.com/gabelerner/canvg">https://github.com/gabelerner/canvg</a><br>svg 导出 png    <a href="https://github.com/exupero/saveSvgAsPng">https://github.com/exupero/saveSvgAsPng</a><br>ai-to-svg    <a href="http://www.zamzar.com/convert/ai-to-svg">http://www.zamzar.com/convert/ai-to-svg</a><br>localStorage 库    <a href="https://github.com/machao/localStorage">https://github.com/machao/localStorage</a><br>图表类</p>
<p>图表类    地址<br>Highcharts 中文API    <a href="http://www.hcharts.cn/api/index.php">http://www.hcharts.cn/api/index.php</a><br>Highcharts 英文API    <a href="http://api.highcharts.com/highcharts">http://api.highcharts.com/highcharts</a><br>ECharts 百度的图表软件    <a href="http://echarts.baidu.com/">http://echarts.baidu.com/</a><br>高德地图    <a href="http://lbs.amap.com/api">http://lbs.amap.com/api</a><br>开源的矢量图脚本框架    <a href="http://paperjs.org">http://paperjs.org</a><br>svg 地图    <a href="http://jvectormap.com">http://jvectormap.com</a><br>正则</p>
<p>正则    地址<br>JS正则表达式元字符    <a href="http://segmentfault.com/a/1190000002471140">http://segmentfault.com/a/1190000002471140</a><br>正则表达式30分钟入门教程    <a href="http://deerchao.net/tutorials/regex/regex.htm">http://deerchao.net/tutorials/regex/regex.htm</a><br>MDN-正则表达式    <a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions">https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions</a><br>ruanyifeng - RegExp对象    <a href="http://javascript.ruanyifeng.com/stdlib/regexp.html">http://javascript.ruanyifeng.com/stdlib/regexp.html</a><br>小胡子哥 - 进阶正则表达式    <a href="http://div.io/topic/764?page=1">http://div.io/topic/764?page=1</a><br>is.js    <a href="https://github.com/Cedriking/is.js/blob/master/is.js">https://github.com/Cedriking/is.js/blob/master/is.js</a><br>正则在线测试    <a href="http://regexper.com">http://regexper.com</a><br>前端</p>
<p>前端    地址<br>通过分析github代码库总结出来的工程师代码书写习惯    <a href="http://alloyteam.github.io/CodeGuide">http://alloyteam.github.io/CodeGuide</a><br>HTML&amp;CSS编码规范 by @mdo    <a href="http://codeguide.bootcss.com">http://codeguide.bootcss.com</a><br>团队合作的css命名规范-腾讯AlloyTeam前端团队    <a href="http://www.alloyteam.com/2011/10/css-on-team-naming/">http://www.alloyteam.com/2011/10/css-on-team-naming/</a><br>前端编码规范之js - by yuwenhui    <a href="http://yuwenhui.github.io">http://yuwenhui.github.io</a><br>前端编码规范之js - by 李靖    <a href="http://www.cnblogs.com/hustskyking/p/javascript-spec.html">http://www.cnblogs.com/hustskyking/p/javascript-spec.html</a><br>前端开发规范手册    <a href="http://zhibimo.com/read/Ashu/front-end-style-guide">http://zhibimo.com/read/Ashu/front-end-style-guide</a><br>Airbnb JavaScript 编码规范（简体中文版）    <a href="https://github.com/yuche/javascript#table-of-contents">https://github.com/yuche/javascript#table-of-contents</a><br>AMD与CMD规范的区别    <a href="http://www.zhihu.com/question/20351507">http://www.zhihu.com/question/20351507</a><br>AMD与CMD规范的区别    <a href="http://www.cnblogs.com/tugenhua0707/p/3507957.html">http://www.cnblogs.com/tugenhua0707/p/3507957.html</a><br>KISSY 源码规范    <a href="http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html">http://docs.kissyui.com/1.4/docs/html/tutorials/style-guide/kissy-source-style.html</a><br>bt编码规范    <a href="http://codeguide.bootcss.com">http://codeguide.bootcss.com</a><br>规范加强版    <a href="https://github.com/Suxiaogang/Code_Guide">https://github.com/Suxiaogang/Code_Guide</a><br>前端代码规范 及 最佳实践    <a href="http://blog.jobbole.com/79075">http://blog.jobbole.com/79075</a><br>百度前端规范    <a href="http://coderlmn.github.io/code-standards">http://coderlmn.github.io/code-standards</a><br>百度前端规范    <a href="http://isobar-idev.github.io/code-standards">http://isobar-idev.github.io/code-standards</a><br>百度前端规范    <a href="http://zhuanlan.zhihu.com/fuyun/19884834">http://zhuanlan.zhihu.com/fuyun/19884834</a><br>ECMAScript6 编码规范—广发证券前端团队    <a href="https://github.com/gf-rd/es6-coding-style">https://github.com/gf-rd/es6-coding-style</a><br>JavaScript 风格指南/编码规范（Airbnb公司版）    <a href="http://blog.jobbole.com/79484">http://blog.jobbole.com/79484</a><br>网易前端开发规范    <a href="http://nec.netease.com/standard">http://nec.netease.com/standard</a><br>css模块    <a href="http://www.75team.com/archives/1049">http://www.75team.com/archives/1049</a><br>前端规范资源列表    <a href="https://github.com/ecomfe/spec">https://github.com/ecomfe/spec</a><br>PHP</p>
<p>PHP    地址<br>最流行的PHP 代码规范    <a href="http://segmentfault.com/a/1190000000443795">http://segmentfault.com/a/1190000000443795</a><br>最流行的PHP 代码规范    <a href="https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md">https://github.com/hfcorriez/fig-standards/blob/zh_CN/%E6%8E%A5%E5%8F%97/PSR-2-coding-style-guide.md</a><br>各大公司开源项目</p>
<p>各大公司开源项目    地址<br>Facebook Projects    <a href="https://code.facebook.com/projects/web">https://code.facebook.com/projects/web</a><br>百度web前端研发部    <a href="http://fex.baidu.com">http://fex.baidu.com</a><br>百度EFE    <a href="http://efe.baidu.com">http://efe.baidu.com</a><br>百度github    <a href="https://github.com/fex-team">https://github.com/fex-team</a><br>alloyteam    <a href="http://www.alloyteam.com">http://www.alloyteam.com</a><br>alloyteam-github    <a href="http://alloyteam.github.io">http://alloyteam.github.io</a><br>alloyteam-AlloyGameEngine    <a href="https://github.com/AlloyTeam/AlloyGameEngine">https://github.com/AlloyTeam/AlloyGameEngine</a><br>AlloyDesigner    <a href="http://alloyteam.github.io/AlloyDesigner">http://alloyteam.github.io/AlloyDesigner</a> 即时修改，即时保存，设计稿较正，其它开发辅助工具<br>H5交互页编辑器AEditor介绍    <a href="http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao">http://www.alloyteam.com/2015/06/h5-jiao-hu-ye-bian-ji-qi-aeditor-jie-shao</a> H5动画交互页开发的工具介绍<br>AEditor    <a href="http://aeditor.alloyteam.com">http://aeditor.alloyteam.com</a> H5动画交互页开发的工具<br>maka    <a href="http://forum.maka.im/wordpress">http://forum.maka.im/wordpress</a><br>值得订阅的weekly    <a href="https://github.com/fenbility/weekly-feed">https://github.com/fenbility/weekly-feed</a><br>腾讯html5    <a href="http://cube.qq.com">http://cube.qq.com</a><br>奇舞团开源项目    <a href="http://75team.github.io">http://75team.github.io</a><br>Qunar UED    <a href="http://ued.qunar.com">http://ued.qunar.com</a><br>Scrat    <a href="http://scrat.io">http://scrat.io</a><br>常用</p>
<p>常用    地址<br>ieBetter.js-让IE6-IE8拥有IE9+,Chrome等浏览器特性    <a href="http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome">http://www.zhangxinxu.com/wordpress/2013/12/iebetter-js-make-ie6-ie8-like-modern-browser-ie9-chrome</a><br>模拟键盘    <a href="http://mottie.github.io/Keyboard">http://mottie.github.io/Keyboard</a><br>拼音    <a href="https://github.com/hotoo/pinyin">https://github.com/hotoo/pinyin</a><br>中国个人身份证号验证    <a href="https://github.com/mc-zone/IDValidator">https://github.com/mc-zone/IDValidator</a><br>算法</p>
<p>算法    地址<br>数据结构与算法 JavaScript 描述. 章节练习    <a href="https://github.com/Ralph-Wang/algorithm.in.js">https://github.com/Ralph-Wang/algorithm.in.js</a><br>常见排序算法（JS版）    <a href="https://github.com/twobin/twobinSort">https://github.com/twobin/twobinSort</a><br>经典排序    <a href="https://github.com/luofei2011/jsAgm/blob/master/js/sort.js">https://github.com/luofei2011/jsAgm/blob/master/js/sort.js</a><br>常见排序算法-js版本    <a href="https://github.com/hechangmin/jssort">https://github.com/hechangmin/jssort</a><br>JavaScript 算法与数据结构 精华集    <a href="https://github.com/lightningtgc/JavaScript-Algorithms">https://github.com/lightningtgc/JavaScript-Algorithms</a><br>面试常考算法题精讲    <a href="http://www.nowcoder.com/live/courses">http://www.nowcoder.com/live/courses</a><br>移动端</p>
<a href="./index5.html" style="font-size:25px;text-align:center;color:#EF3F52">更多</a>
		</header>
		
	</div>
	<img id="background" alt="background" src="" />
        <div id="infobox" >
            <div>
                <h1>rainyday.js</h1>
                <p>A simple script for simulating raindrops falling on a glass surface.</p>

                <p>
                    <button onclick="document.getElementById('background').src='http://i.imgur.com/U1Tqqdw.jpg';">Dark Image</button>
                    <button onclick="document.getElementById('background').src='http://i.imgur.com/VuX2Nf0.jpg';">Light Image</button>
                </p>
<a href="./index5.html" style="font-size:25px;text-align:center">更多</a>
               
            </div>
        </div>
</body>
</html>